<template>
  <div class="offerforsale">
    <el-row>
      <el-col :span="16">
        <div class="grid-content bg-purple-dark">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="车辆ID" prop="brand">
              <el-input v-model="form.car_id" disabled></el-input>
            </el-form-item>
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="form.brand"></el-input>
            </el-form-item>

            <el-form-item label="型号" prop="type">
              <el-input v-model="form.type"></el-input>
            </el-form-item>

            <el-form-item label="价格" prop="price">
              <el-input v-model="form.price">
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="上牌时间" prop="card_time">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  prop="type"
                  v-model="pushTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="行驶里程" prop="mile">
              <el-input v-model="form.mile"> <template slot="append">公里</template></el-input>
            </el-form-item>

            <el-form-item label="排量" prop="displacement">
              <el-input v-model="disp">
                <template slot="append"
                  ><i class="el-icon-refresh" v-if="isDisplacement" @click="setDisplacement"> T </i></template
                >
                <template slot="append"
                  ><i class="el-icon-refresh" v-if="!isDisplacement" @click="setDisplacement"> L </i></template
                >
              </el-input>
            </el-form-item>

            <el-form-item label="排放标准" prop="emission_standard">
              <el-radio-group v-model="form.emission_standard">
                <el-radio-button label="国三"></el-radio-button>
                <el-radio-button label="国四"></el-radio-button>
                <el-radio-button label="国五"></el-radio-button>
                <el-radio-button label="国六"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="变速箱" prop="gearbox">
              <el-radio-group v-model="form.gearbox">
                <el-radio-button label="手动"></el-radio-button>
                <el-radio-button label="自动"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="过户次数" prop="transfer_times">
              <el-input v-model="form.transfer_times"></el-input>
            </el-form-item>
            <el-form-item label="所在城市" prop="city_name">
              <div>
                <area-cascader class="cascader" v-model="town" :data="pca"></area-cascader>
              </div>
            </el-form-item>
            <el-form-item label="车辆类型" prop="model">
              <el-radio-group v-model="form.model">
                <el-radio-button label="SUV"></el-radio-button>
                <el-radio-button label="轿车"></el-radio-button>
                <el-radio-button label="跑车"></el-radio-button>
                <el-radio-button label="面包车"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="座位数" prop="seats">
              <el-input v-model="form.seats"></el-input>
            </el-form-item>
            <el-form-item label="事故情况" prop="accident_situation">
              <el-radio-group v-model="form.accident_situation">
                <el-radio-button label="无事故"></el-radio-button>
                <el-radio-button label="轻微"></el-radio-button>
                <el-radio-button label="严重"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="其他" prop="other">
              <el-input v-model="form.other"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      title="上传照片"
      :visible.sync="drawer"
      direction="btt"
      :before-close="handleClose"
      size="600px"
      ref="eldrawer"
    >
      <EldrAwer :id="id" :updata="updata"></EldrAwer>
    </el-drawer>
  </div>
</template>

<script>
import { pca } from 'area-data'
import placesMap from '@/utils/city'
import rules from './rules'
import { editPersonalCar } from '@/api/cart'
import EldrAwer from '@/views/components/publish-img.vue'
export default {
  name: 'EditorCar',
  components: {
    EldrAwer
  },
  data() {
    return {
      id: '',
      disp: '', // pailiang
      isDisplacement: true, // true wei T
      placesMap: placesMap,
      pca: pca,
      disabled: false,
      drawer: false,
      //发布时间
      pushTime: '',
      //城市,
      town: '',
      form: {
        // 品牌
        brand: '',
        // 型号
        type: '',
        // 价格
        price: '',
        // 上牌时间
        card_time: '',
        // 行驶里程
        mile: '',
        // 排量
        displacement: '',
        // 排放标准
        emission_standard: '',
        // 变速箱
        gearbox: '',
        // 转手次数
        transfer_times: '',
        // 城市
        city_name: '',
        // 类型
        model: '',
        // 座位数
        seats: '',
        // 事故
        accident_situation: '',
        // 其他说明
        other: ''
      },
      rules: rules
    }
  },
  watch: {
    disp: function (value) {
      this.form.displacement = this.isDisplacement ? value + 'T' : value + 'L'
    },
    isDisplacement: function (value) {
      this.form.displacement = value ? this.disp + 'T' : this.disp + 'L'
    },
    pushTime: {
      deep: true,
      handler: function (value) {
        const year = new Date(value).getFullYear()
        let month = new Date(value).getMonth() + 1
        let date = new Date(value).getDate()
        this.form.card_time = year + '-' + month + '-' + date
      }
    },

    town: {
      deep: true,
      handler: function (value) {
        const city = this.placesMap[value[1]]
        this.form.city_name = city
        console.log(this.form.city_name)
      }
    }
  },
  created() {
    console.log(this.$route.params.car)
  },
  mounted() {
    if (this.$route.params) {
      this.form = this.$route.params.car
      this.form.car_id = this.form.id
      delete this.form.id
      delete this.form.photo
    }
  },
  methods: {
    //自定义事件
    updata() {
      this.drawer = false
      this.$refs.eldrawer.closeDrawer()
    },
    //切换TL
    setDisplacement() {
      this.isDisplacement = !this.isDisplacement
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    // 点击下一步
    onSubmit() {
      this.$refs.form.validate(async valid => {
        // 提交数据前校验
        if (valid) {
          const res = await editPersonalCar({ ...this.form })
          if (res.data.data) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
          } else {
            this.$message(res.data.msg)
          }
        } else {
          
        this.$message({
          message: '未知错误',
          type: 'warning'
        });
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.inputTextValue {
  border: 1px solid #ccc;
  width: 70%;
  height: 32px;
  margin-top: 10px;
}
.normalImgUploadWrapper:hover .el-icon-delete-solid {
  display: block;
}
.normalImgUploadWrapper {
  position: relative;
  height: 180px;
  width: 200px;
  border: 1px solid #ccc;
  :hover {
    cursor: pointer;
  }
  .inputImg {
    height: 180px;
    width: 200px;
  }
  .el-icon-delete-solid {
    display: none;
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .el-icon-plus {
    position: absolute;
    font-size: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.el-icon-refresh {
  color: red;
  font-size: 30px;
  cursor: pointer;
}
/deep/.cascader {
  span {
    padding: 0 0 0 10px;
  }
}
.eldrawer {
  h5 {
    margin: 10px;
    text-align: center;
  }
  .bg-purple {
    color: red;
  }
  .botton {
    margin: 50px;
  }
  margin-left: 50px;
  h4 {
    margin-top: 0;
  }
}
.grid-content {
  padding: 20px;
}
.offerforsale {
  background-color: #fff;
  margin-top: 20px;
}
</style>
